import React from 'react';
import { useRouter } from 'next/router';
import Layout from '../../../components/Layout';
import Link from 'next/link';

interface JobData {
  title: string;
  location: string;
  department: string;
  type: string;
  description: string;
  responsibilities: string[];
  requirements: string[];
  benefits: string[];
}

// 模拟职位数据
const jobsData: Record<string, JobData> = {
  '1': {
    title: '高级软件工程师',
    location: '广州',
    department: '研发部',
    type: '全职',
    description: '我们正在寻找一位经验丰富的高级软件工程师，加入我们的研发团队，负责开发和维护公司的核心产品。',
    responsibilities: [
      '设计、开发和测试高质量的软件应用',
      '参与技术方案讨论，提供专业意见和建议',
      '改进现有代码，优化系统性能',
      '与产品、设计和测试团队协作，确保产品质量',
      '指导初级开发人员，提供技术支持和培训'
    ],
    requirements: [
      '计算机科学或相关专业本科及以上学历',
      '5年以上软件开发经验',
      '精通JavaScript/TypeScript、React、Node.js等前端技术',
      '熟悉数据库设计和优化',
      '良好的问题解决能力和团队协作能力',
      '具备良好的沟通能力和学习能力'
    ],
    benefits: [
      '有竞争力的薪资和年终奖',
      '五险一金、商业保险',
      '带薪年假、带薪病假',
      '弹性工作时间',
      '职业发展机会',
      '团队建设活动',
      '免费健身房和餐饮补贴'
    ]
  },
  '2': {
    title: '产品经理',
    location: '广州',
    department: '产品部',
    type: '全职',
    description: '我们正在寻找一位有创意的产品经理，负责定义和开发创新产品，满足用户需求并推动业务增长。',
    responsibilities: [
      '制定产品战略和路线图',
      '收集和分析用户需求，转化为产品功能',
      '与设计和开发团队合作，确保产品符合预期',
      '分析市场趋势和竞争对手的产品',
      '推动产品从概念到发布的整个过程'
    ],
    requirements: [
      '3年以上互联网产品管理经验',
      '优秀的分析能力和解决问题的能力',
      '良好的沟通和协作能力',
      '熟悉敏捷开发方法',
      '对用户体验和设计有深入理解'
    ],
    benefits: [
      '有竞争力的薪资和年终奖',
      '五险一金、商业保险',
      '带薪年假、带薪病假',
      '弹性工作时间',
      '职业发展机会',
      '团队建设活动',
      '免费健身房和餐饮补贴'
    ]
  },
  '3': {
    title: 'UI/UX设计师',
    location: '广州',
    department: '设计部',
    type: '全职',
    description: '我们正在寻找一位有才华的UI/UX设计师，设计美观且用户友好的界面，提升用户体验。',
    responsibilities: [
      '创建用户流程、线框图和原型',
      '设计美观且符合品牌的用户界面',
      '与产品和开发团队合作，确保设计的实现',
      '分析用户反馈，持续改进设计',
      '参与用户研究和测试'
    ],
    requirements: [
      '3年以上UI/UX设计经验',
      '精通Figma、Sketch、Adobe XD等设计工具',
      '具备强大的视觉设计能力',
      '熟悉交互设计原则和最佳实践',
      '能够理解技术限制和可能性'
    ],
    benefits: [
      '有竞争力的薪资和年终奖',
      '五险一金、商业保险',
      '带薪年假、带薪病假',
      '弹性工作时间',
      '职业发展机会',
      '团队建设活动',
      '免费健身房和餐饮补贴'
    ]
  },
  '4': {
    title: '前端开发工程师',
    location: '广州',
    department: '研发部',
    type: '全职',
    description: '我们正在寻找一位熟练的前端开发工程师，负责构建用户界面和交互体验。',
    responsibilities: [
      '开发高质量、响应式的用户界面',
      '与设计师和后端开发人员合作，实现产品功能',
      '优化前端代码，提高性能和可维护性',
      '解决浏览器兼容性问题',
      '保持对前端技术的了解和应用'
    ],
    requirements: [
      '计算机相关专业本科及以上学历',
      '3年以上前端开发经验',
      '精通HTML、CSS、JavaScript',
      '熟悉React、Vue或Angular等现代前端框架',
      '理解RESTful API和前后端交互',
      '良好的代码风格和文档习惯'
    ],
    benefits: [
      '有竞争力的薪资和年终奖',
      '五险一金、商业保险',
      '带薪年假、带薪病假',
      '弹性工作时间',
      '职业发展机会',
      '团队建设活动',
      '免费健身房和餐饮补贴'
    ]
  },
  '5': {
    title: '后端开发工程师',
    location: '广州',
    department: '研发部',
    type: '全职',
    description: '我们正在寻找一位熟练的后端开发工程师，负责设计和实现高性能、可扩展的服务端应用。',
    responsibilities: [
      '设计和开发高性能、可扩展的API和服务',
      '与前端开发人员合作，确保无缝集成',
      '优化数据库结构和查询',
      '保证代码质量和系统安全',
      '参与技术方案的讨论和评审'
    ],
    requirements: [
      '计算机相关专业本科及以上学历',
      '3年以上后端开发经验',
      '精通Java、Python、Go或Node.js等语言',
      '熟悉关系型数据库和NoSQL数据库',
      '了解微服务架构和云服务',
      '良好的问题解决能力和团队协作能力'
    ],
    benefits: [
      '有竞争力的薪资和年终奖',
      '五险一金、商业保险',
      '带薪年假、带薪病假',
      '弹性工作时间',
      '职业发展机会',
      '团队建设活动',
      '免费健身房和餐饮补贴'
    ]
  },
  '6': {
    title: '数据分析师',
    location: '广州',
    department: '运营部',
    type: '全职',
    description: '我们正在寻找一位数据分析师，负责收集、分析和解释数据，为业务决策提供支持。',
    responsibilities: [
      '收集和处理大量数据，提取有价值的信息',
      '开发和维护数据分析模型',
      '创建可视化报表和仪表盘',
      '与产品和运营团队合作，提供数据驱动的决策支持',
      '监控关键指标，发现异常并提出改进建议'
    ],
    requirements: [
      '统计学、数学、计算机科学或相关专业本科及以上学历',
      '2年以上数据分析经验',
      '精通SQL和数据分析工具',
      '熟悉Python或R等数据处理语言',
      '熟悉数据可视化工具和技术',
      '良好的沟通能力和团队协作精神'
    ],
    benefits: [
      '有竞争力的薪资和年终奖',
      '五险一金、商业保险',
      '带薪年假、带薪病假',
      '弹性工作时间',
      '职业发展机会',
      '团队建设活动',
      '免费健身房和餐饮补贴'
    ]
  },
  '7': {
    title: '市场营销经理',
    location: '广州',
    department: '市场部',
    type: '全职',
    description: '我们正在寻找一位有创意的市场营销经理，负责制定和执行市场策略，提高品牌知名度和产品销售。',
    responsibilities: [
      '制定和执行市场营销策略和计划',
      '管理和优化营销渠道',
      '策划和组织营销活动和推广',
      '监控和分析营销效果',
      '管理市场营销预算'
    ],
    requirements: [
      '市场营销或相关专业本科及以上学历',
      '5年以上市场营销经验',
      '优秀的项目管理和团队协作能力',
      '出色的创意思维和问题解决能力',
      '良好的数据分析能力和市场洞察力'
    ],
    benefits: [
      '有竞争力的薪资和年终奖',
      '五险一金、商业保险',
      '带薪年假、带薪病假',
      '弹性工作时间',
      '职业发展机会',
      '团队建设活动',
      '免费健身房和餐饮补贴'
    ]
  },
  '8': {
    title: 'HR招聘专员',
    location: '广州',
    department: '人力资源部',
    type: '全职',
    description: '我们正在寻找一位经验丰富的HR招聘专员，负责人才招聘和筛选，为公司吸引和保留优秀人才。',
    responsibilities: [
      '制定和执行招聘计划',
      '发布职位信息，筛选简历，组织面试',
      '与部门主管沟通，了解用人需求',
      '建立和维护人才库',
      '组织校园招聘和招聘会活动'
    ],
    requirements: [
      '人力资源管理或相关专业本科及以上学历',
      '2年以上招聘工作经验',
      '了解各种招聘渠道和方法',
      '优秀的沟通能力和人际交往能力',
      '良好的组织协调能力和时间管理能力'
    ],
    benefits: [
      '有竞争力的薪资和年终奖',
      '五险一金、商业保险',
      '带薪年假、带薪病假',
      '弹性工作时间',
      '职业发展机会',
      '团队建设活动',
      '免费健身房和餐饮补贴'
    ]
  },
  '9': {
    title: '算法工程师',
    location: '广州',
    department: '研发部',
    type: '全职',
    description: '我们正在寻找一位有经验的算法工程师，负责开发和优化算法，解决复杂的技术问题。',
    responsibilities: [
      '设计和实现高效的算法和数据结构',
      '研究和应用最新的算法技术',
      '优化现有算法，提高性能和准确性',
      '与产品和开发团队合作，将算法应用到实际产品中',
      '撰写技术文档和研究报告'
    ],
    requirements: [
      '计算机科学、人工智能或相关专业硕士及以上学历',
      '3年以上算法开发经验',
      '精通常用的算法和数据结构',
      '熟悉机器学习、深度学习等技术',
      '有较强的数学基础和编程能力',
      '具备良好的问题分析和解决能力'
    ],
    benefits: [
      '有竞争力的薪资和年终奖',
      '五险一金、商业保险',
      '带薪年假、带薪病假',
      '弹性工作时间',
      '职业发展机会',
      '团队建设活动',
      '免费健身房和餐饮补贴'
    ]
  }
};

export default function JobDetail() {
  const router = useRouter();
  const { id } = router.query;
  
  const job = id && typeof id === 'string' ? jobsData[id] : undefined;
  
  if (!job) {
    return (
      <Layout title="职位不存在 - 凡科星悦">
        <div className="container mx-auto px-4 py-16">
          <div className="bg-white rounded-lg shadow-md p-8 text-center">
            <svg
              className="mx-auto h-16 w-16 text-gray-400 mb-4"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
                d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
              ></path>
            </svg>
            <h1 className="text-2xl font-bold text-gray-800 mb-4">职位不存在</h1>
            <p className="text-gray-600 mb-6">您查找的职位不存在或已经被删除。</p>
            <Link href="/careers">
              <span className="btn btn-primary cursor-pointer">查看所有职位</span>
            </Link>
          </div>
        </div>
      </Layout>
    );
  }

  return (
    <Layout
      title={`${job.title} - 凡科星悦`}
      description={`${job.title}职位描述 - 加入凡科星悦团队，成为推动技术创新的一员。`}
    >
      {/* Breadcrumb */}
      <div className="bg-gray-100 border-b">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center text-sm">
            <Link href="/">
              <span className="text-gray-600 hover:text-blue-600 cursor-pointer">首页</span>
            </Link>
            <svg className="h-4 w-4 mx-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7"></path>
            </svg>
            <Link href="/careers">
              <span className="text-gray-600 hover:text-blue-600 cursor-pointer">职位列表</span>
            </Link>
            <svg className="h-4 w-4 mx-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7"></path>
            </svg>
            <span className="text-gray-800">{job.title}</span>
          </div>
        </div>
      </div>

      {/* Job Details */}
      <div className="container mx-auto px-4 py-12">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Left Column - Job Details */}
          <div className="lg:col-span-2">
            <div className="bg-white rounded-lg shadow-md p-8 mb-8">
              <h1 className="text-3xl font-bold text-gray-800 mb-6">{job.title}</h1>
              
              <div className="flex flex-wrap gap-4 mb-8">
                <div className="flex items-center text-gray-600">
                  <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                  </svg>
                  <span>{job.location}</span>
                </div>
                
                <div className="flex items-center text-gray-600">
                  <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                  </svg>
                  <span>{job.department}</span>
                </div>
                
                <div className="flex items-center text-gray-600">
                  <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                  </svg>
                  <span>{job.type}</span>
                </div>
              </div>
              
              <div className="mb-8">
                <h2 className="text-xl font-bold text-gray-800 mb-4">职位描述</h2>
                <p className="text-gray-600">{job.description}</p>
              </div>
              
              <div className="mb-8">
                <h2 className="text-xl font-bold text-gray-800 mb-4">工作职责</h2>
                <ul className="list-disc pl-5 space-y-2 text-gray-600">
                  {job.responsibilities.map((item: string, index: number) => (
                    <li key={index}>{item}</li>
                  ))}
                </ul>
              </div>
              
              <div className="mb-8">
                <h2 className="text-xl font-bold text-gray-800 mb-4">任职要求</h2>
                <ul className="list-disc pl-5 space-y-2 text-gray-600">
                  {job.requirements.map((item: string, index: number) => (
                    <li key={index}>{item}</li>
                  ))}
                </ul>
              </div>
              
              <div>
                <h2 className="text-xl font-bold text-gray-800 mb-4">福利待遇</h2>
                <ul className="list-disc pl-5 space-y-2 text-gray-600">
                  {job.benefits.map((item: string, index: number) => (
                    <li key={index}>{item}</li>
                  ))}
                </ul>
              </div>
            </div>
            
            {/* Similar Jobs */}
            <div className="bg-white rounded-lg shadow-md p-8">
              <h2 className="text-xl font-bold text-gray-800 mb-4">相似职位</h2>
              <div className="space-y-4">
                {Object.entries(jobsData)
                  .filter(([jobId, _]) => jobId !== id)
                  .slice(0, 2)
                  .map(([jobId, jobData]) => (
                    <Link href={`/careers/positions/${jobId}`} key={jobId}>
                      <div className="border border-gray-200 rounded-lg p-4 hover:shadow-md cursor-pointer">
                        <h3 className="text-lg font-semibold text-gray-800 mb-2">{jobData.title}</h3>
                        <div className="flex flex-wrap gap-4">
                          <div className="flex items-center text-gray-600">
                            <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                            </svg>
                            <span>{jobData.location}</span>
                          </div>
                          
                          <div className="flex items-center text-gray-600">
                            <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                            </svg>
                            <span>{jobData.department}</span>
                          </div>
                        </div>
                      </div>
                    </Link>
                  ))}
              </div>
            </div>
          </div>
          
          {/* Right Column - Apply Form */}
          <div className="lg:col-span-1">
            <div className="bg-white rounded-lg shadow-md p-8 sticky top-24">
              <h2 className="text-xl font-bold text-gray-800 mb-4">申请职位</h2>
              <p className="text-gray-600 mb-6">填写以下表单申请该职位，我们的招聘团队会尽快联系您。</p>
              
              <form>
                <div className="mb-4">
                  <label htmlFor="name" className="block text-gray-700 font-medium mb-2">姓名</label>
                  <input
                    type="text"
                    id="name"
                    className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                    placeholder="请输入您的姓名"
                    required
                  />
                </div>
                
                <div className="mb-4">
                  <label htmlFor="email" className="block text-gray-700 font-medium mb-2">邮箱</label>
                  <input
                    type="email"
                    id="email"
                    className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                    placeholder="请输入您的邮箱"
                    required
                  />
                </div>
                
                <div className="mb-4">
                  <label htmlFor="phone" className="block text-gray-700 font-medium mb-2">电话</label>
                  <input
                    type="tel"
                    id="phone"
                    className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                    placeholder="请输入您的电话号码"
                    required
                  />
                </div>
                
                <div className="mb-4">
                  <label htmlFor="resume" className="block text-gray-700 font-medium mb-2">上传简历</label>
                  <div className="border border-dashed border-gray-300 rounded-md p-4 text-center">
                    <svg
                      className="mx-auto h-12 w-12 text-gray-400 mb-2"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth="2"
                        d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
                      ></path>
                    </svg>
                    <p className="text-gray-600 mb-2">点击选择文件或拖拽文件到此处</p>
                    <p className="text-gray-500 text-sm">支持 PDF, DOC, DOCX 格式，不超过5MB</p>
                    <input type="file" id="resume" className="hidden" accept=".pdf,.doc,.docx" required />
                    <button
                      type="button"
                      className="mt-4 px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors"
                      onClick={() => document.getElementById('resume')?.click()}
                    >
                      选择文件
                    </button>
                  </div>
                </div>
                
                <div className="mb-4">
                  <label htmlFor="message" className="block text-gray-700 font-medium mb-2">留言</label>
                  <textarea
                    id="message"
                    className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                    rows={4}
                    placeholder="请简要介绍您自己和您的工作经验"
                  ></textarea>
                </div>
                
                <button
                  type="submit"
                  className="w-full btn btn-primary py-3 text-lg font-medium"
                >
                  提交申请
                </button>
              </form>
              
              <div className="mt-6 text-center">
                <p className="text-gray-500 text-sm">
                  点击"提交申请"，即表示您同意我们的
                  <Link href="/privacy">
                    <span className="text-blue-600 hover:underline cursor-pointer">隐私政策</span>
                  </Link>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Layout>
  );
} 